<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>仲裁详情</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        #container{padding: 0;}
        .content{
            margin-top:.13rem;
			padding:0 0.35rem;
        }
        .arb_info{
			background:#FFF;
          padding-top:0.25rem;
        }
        .inline{
          padding:0.2rem 0;
        }
        .inline h3{
          line-height:0.6rem;
          font-size:0.3rem;
          font-weight:normal;
		  width:1.5rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
        }
        .inline p{
          color:#999999;
          padding-left:0.6rem;
          line-height:0.6rem;
          font-size:0.3rem;
          margin:0;
          text-align:left;
        }
        .inline .icon{
          width:1rem;
          height:1rem;
          border-radius:50%;
        }
        .inline .look{
          border: 1px solid #F6F6F6;
          color: #333;
          font-size:0.28rem;
          border-radius:1rem;
          margin-left:0.3rem;
          padding:0.11rem 0.25rem;
        }
        #footer{
          bottom:0;
          position:fixed;
          bottom:0;
          left:0;
          width:100%;
          z-index:1000;
          background:#FFF;
          box-shadow: 0px 0px 6px #F1F1F1;
        }
        .buttonFooter{
          height:1.2rem;
          padding:0.14rem;
        }
        .buttonFooter .defalut{
          background:linear-gradient(to right,#ff2626 0%,#fd6e1f 70%);
          display: block;
          width:100%;
          color:#FFF;
          height:calc(1.2rem - 0.28rem);
          line-height:calc(1.2rem - 0.28rem);
          width:100%;
          font-size:0.3rem;
          text-align:center;
          border-radius:0.03rem;
        }
        .buttonFooter .no_click{
          background: #9a9696;
        }
        .arb_timeline{
          margin-top:0.1rem;
        }
        .arb_timeline .li{
          padding-bottom:0.7rem;
          position:relative;
        }
        .arb_timeline .li:before{
          content:" ";
          position:absolute;
          top:0;
          height:100%;
          left:0.25rem;
          background:#F9F9F9;
          width:1px;
        }
        .arb_timeline .li:nth-last-child(1):before{display:none;}
        .arb_timeline .li .num{
          font-size:0.27rem;
          width:0.5rem;
          height:0.5rem;
          line-height:0.5rem;
          border-radius:50%;
          float:left;
          background:#F1F1F1;
          text-align:center;
          font-style:normal;
          position:relative;
          z-index:1;
        }
        .arb_timeline .li .info{
          float:left;
          padding-left:0.25rem;
          width:calc(100% - 0.5rem);
        }
        .arb_timeline .li .info>h3{
          font-weight:normal;
          color:#0F0F0F;
          font-size:0.29rem;
          line-height:0.5rem;
        }
        .arb_timeline .li .info>div{
          color:#6e6e6e;
          font-size:0.29rem;
          line-height:0.6rem;
          margin-top:0.1rem;
        }
        .arb_timeline .li .info .videoImgList{
          padding-top:0.2rem;
        }
        .arb_timeline .li .info .videoImgList div{
          width:calc((100% - 0.6rem) / 4)!important;
          margin-bottom:0.2rem;
          margin-right:0.2rem;
          position:relative;
          background:#000;
          float:left;
        }
        .arb_timeline .li .info .videoImgList div:nth-child(4n){
          margin-right:0;
        }
        .arb_timeline .li .info .videoImgList div img{
          display: block;
          object-fit: cover;
          height:100%;
          width:100%;
        }
        .arb_logBox{
            background:#FFF;
        }
        .show-more{
            height: 0.7rem;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
			margin-top:0.2rem;
			padding-bottom:0.3rem;
        }
        .show-more img{
            width: 0.3rem;
            height: 0.3rem;
        }
        .show-more.up img{
            transform: rotateZ(180deg);
        }
        .tab-nav{
            height: 1rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 1rem;
			margin-bottom:0.3rem;
        }
        .tab-nav li{
            list-style: none;
            flex: 1;
            text-align: center;
            line-height: 1rem;
            position: relative;
			font-size:0.3rem;
        }
		.tab-nav li.active{
			color: #FF0909;
		}
        .tab-nav li.active::after{
            content: '';
            width: 0.5rem;
            height: 3px;
            border-radius: 2px;
            background: #ff3131;
            position: absolute;
            bottom: .1rem;
            left: 50%;
            transform: translateX(-50%);
        }

.step {
	background: #FFF;
	padding-bottom: 0.4rem;
}

.step .ftitle {
	font-weight: normal;
	margin-bottom: 0.6rem;
}

.step .ftitle:after {
	height: 0.05rem;
	background: #6B41E1;
}

.step .step_content {
	margin-bottom: 0.4rem;
}

.step .step_content>i {
	float: left;
	width: 0.5rem;
	height: 0.5rem;
	line-height: 0.5rem;
	text-align: center;
	font-size: 0.29rem;
	border-radius: 50%;
	background: #EEEEEE;
	color: #767676;
	font-style: normal;
}

.step .step_content>.info {
	float: left;
	width: calc(100% - 0.5rem - 0.3rem);
	margin-left: 0.3rem;
	border-bottom: 1px solid #F9F9F9;
	padding-bottom: 0.5rem;
}

.step .step_content>.info .h3 {
	font-weight: normal;
	line-height: 0.5rem;
	color: #2F2F2f;
	font-size: 0.31rem;
}

.step .step_content>.info .h3 i {
	background: #F30;
	color: #FFF;
	font-style: normal;
	font-size: 0.26rem;
	padding: 0.05rem 0.2rem;
	border-radius: 1rem;
	margin-left: 0.35rem;
	vertical-align: middle;
	margin-top: -0.08rem;
}

.step .step_content>.info .intrText {
	color: #777777;
	font-size: 0.29rem;
	line-height:0.6rem;
	margin-top: 0.3rem;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

.step .step_content>.info .btnText {
	font-size: 0.29rem;
	margin-top: 0.3rem;
}

.step .step_content>.info .btnText .text {
	color: #2f2f2f;
	line-height: 0.6rem;
	word-break: break-all;
}

.step .step_content>.info .btnText .text ._link {
	color: #5A98FF;
}

.step .step_content>.info .btnText .btn {
	margin-top: 0.3rem;
}

.step .step_content>.info .btnText .btn a {
	float: left;
	font-size: 0.26rem;
	margin-right: 0.3rem;
	color: #939393;
	border: 1px solid #ECECEC;
	line-height: calc(0.55rem - 2px);
	height: 0.55rem;
	padding: 0px 0.25rem;
	border-radius: 0.07rem;
}

.step .step_content>.info .task_input {
	margin-top: 0.3rem;
	position: relative;
	padding: 0.12rem 0.1rem 0.12rem 0.29rem;
	background: #F6F6F6;
	border-radius: 0.07rem;
}

.step .step_content>.info .task_input input {
	height: 0.6rem;
	line-height: 0.6rem;
	outline: none;
	font-size: 0.29rem;
}

.step .step_content>.info .task_input ._select {
	width: 0.6rem;
	background: url(../../../../static/img/Triangle.png) no-repeat center center;
	background-size: 30%;
}

.step .step_content>.info .task_input span {
	display: block;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.25rem;
	text-align: right;
	color: #5A98FF;
}

.step .step_content>.info .img {
	margin-top: 0.35rem;
	margin-bottom: -0.25rem;
}

.step .step_content .info .img .item {
	float: left;
	margin-bottom: 0.25rem;
	width: 1.8rem;
	height: 1.8rem;
	line-height: 1.8rem;
	margin-right: 0.2rem;
	position: relative;
}

.step .step_content .info .img .item:nth-last-child(1) {
	margin-right: 0;
}

.step .step_content .info .img .item span {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #FFF;
	font-size: 0.28rem;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.2);
	text-align: center;
	transform: translate(-50%, -50%);
}

.step .step_content .info .img .item img {
	display: block;
	width: 100%;
	object-fit: cover;
	height: 100%;
}

.step .step_content:nth-last-child(1) {
	margin-bottom: 0;
}

.step .step_content:nth-last-child(1)>.info {
	border-bottom: 0;
}
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <template v-if="info != null">
            <div id="container" :style="{'padding-bottom':containerPadding}">
                <div class="arb_info content">
                    <div class="inline disbox">
                        <h3>分类名称</h3>
                        <p class="disflex">{{info.task_info.first_name}} - {{info.task_info.seconde_name}}
                            <a @click="goTaskDetail" class="look">查看任务</a>
                        </p>
                    </div>
					<div class="inline disbox">
						<h3>悬赏价格</h3>
						<p class="disflex" style="color:#FF0909;">{{$.parsePrice(info.task_info.amount_actual, 2)}}元</p>
					</div>
					<div class="inline disbox">
						<h3>维权状态</h3>
						<p class="disflex" :style="{'color': renderStatusUI(info.arbitration_info.status).color}">{{renderStatusUI(info.arbitration_info.status).text}}</p>
					</div>
                    <div class="inline disbox">
                        <h3>任务标题</h3>
                        <p class="disflex">{{info.task_info.title}}</p>
                    </div>
                    <template v-if="showMore">
						<div class="inline disbox">
							<h3>类型</h3>
							<p class="disflex">
								<img :src="info.task_info.icon" class="icon" />
							</p>
						</div>
						<div class="inline disbox">
						    <h3>仲裁ID</h3>
						    <p class="disflex">{{info.arbitration_info.id}}</p>
						</div>
                        <div class="inline disbox">
                            <h3>接单时间</h3>
                            <p class="disflex">{{info.task_info.task_accept_time | dateFormate}}</p>
                        </div>
                        <div class="inline disbox">
                            <h3>仲裁时间</h3>
                            <p class="disflex">{{info.arbitration_info.report_time | dateFormate}}</p>
                        </div>
                    </template>
                    <div @click="showMore=!showMore" class="show-more" :class="{up: showMore}"><img src="../../../image/icons/bottom.png" alt="show more"></div>
                </div>
                <div class="arb_logBox content">
                    <ul class="tab-nav">
                        <li @click="navIndex = 0" :class="{active: navIndex == 0}">仲裁记录</li>
                        <li @click="navIndex = 1" :class="{active: navIndex == 1}">任务步骤</li>
                    </ul>
                    <div v-if="navIndex == 0" class="arb_timeline">
                        <div class="li clearfix" v-for="(item, index) in info.log">
                            <i class="num">{{index+1}}</i>
                            <div class="info">
                                <h3>{{item.time_created | dateFormate}}</h3>
                                <div>行为：<font>{{item.opration}}</font></div>
                                <div>原因：{{item.remark}}</div>
                                <div v-if="item.is_close == 1 && showCountdown(item)">
                                    <font v-if="info.arbitration_info.status == 3 || info.arbitration_info.status == 5" color="#F30">派单人暂未上传复审,倒计时：{{publishDiffTime | timeFormate}}</font>
                                    <br />
                                    <font v-if="info.arbitration_info.status == 4 || info.arbitration_info.status == 5" color="#F30">接单人暂未上传复审,倒计时：{{acceptDiffTime | timeFormate}}</font>
                                </div>
                                <div class="videoImgList" v-if="item.mate != ''">
                                    <div class="clearfix" :style="{'height':('calc(('+imgHeight+'px - 0.7rem - 0.75rem - 0.6rem) / 4)')}" v-for="(img, key) in item.mate">
                                        <img @click="viewMedia(img.url)" :src="getMediaUrl(img.url)" class="icon"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="li clearfix" v-if="info.log.length > 0 && lastLog != null">
                            <i class="num">{{info.log.length+1}}</i>
                            <div class="info">
                                <h3>{{info.log[info.log.length-1].time_created | dateFormate}}</h3>
                                <div :style="{color: lastLog.color}"><font>{{lastLog.text}}</font></div>
                            </div>
                        </div>
                    </div>
                    <div v-if="navIndex == 1" class="task-steps">
                        <div class="step stepDom">
                            <div class="step_content clearfix" v-for="(step, stepIndex) in steps">
                                <i>{{stepIndex+1}}</i>
                                <div class="info">
                                    <h3 class="h3">第{{Nzh.encodeS(stepIndex+1)}}步</h3>
                                    <template v-if="step.length > 0" v-for="(item, index) in step">
                                        <!-- 文本描述 -->
                                        <template v-if="item.type == 'Description'">
                                            <div class="intrText">{{item.value}}</div>
                                        </template>
                                        <!-- 可操作内容 -->
                                        <template v-if="item.type == 'Operable'">
                                            <div class="btnText" >
                                                <div class="text"> 
                                                    <!-- <div> -->
                                                        {{item.target.type}}：
                                                    <!-- </div> -->
                                                    <span class="_link copyDom" @click="copyOperableVal(item.target.value)">{{item.target.value}}</span>
                                                </div>
                                            </div>
                                        </template>
                                        <!-- 收集用户文字信息 -->
                                        <template  v-if="item.type == 'CollectTextInfo'">
                                            <div class="task_input flex">
                                                <input type="text" class="flex1" disabled="false" :value="item.value" />
                                            </div>
                                        </template>
                                        <!-- 图片 -->
                                        <template v-if="utils.isArray(item)" >
                                            <div class="img clearfix">
                                                <div class="item" v-for="imgItem in item">
                                                    <template v-if="imgItem.type == 'Gallery'">
                                                        <img class="comImgwh" :src="imgItem.uri" />
                                                        <span @click="viewPicture(imgItem.uri)" v-if="true">示例图</span>
                                                    </template>
                                                    <template v-if="imgItem.type == 'CollectGallery'">
                                                            <img @click="viewPicture(imgItem.uri)" class="comImgwh" :src="imgItem.uri" />
                                                    </template>
                                                </div>
                                            </div>                 
                                        </template>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="loadFull whiteBg">
                <div class="se-loading"></div>
            </div>
        </template>

        <div id="footer" v-if="showUploadBtn">
            <div class="buttonFooter" @click="$.openUrl('common/commonTitle','my/arbitrationApply',{title:'上传复审', id: id, logId: logId});">
                <button class="defalut">上传复审</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var photoBrowser = api.require('photoBrowser');
            var clipBoard = api.require('clipBoard');
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    imgHeight:document.body.clientWidth,
                    rect:$.rect(),
                    containerPadding:0,

                    referer: '',
                    
                    id: 0,
                    logId: 0,
                    info: null,
                    lastLog: null,
                    steps: null,
                    acceptDiffTime: 0,
                    publishDiffTime: 0,
                    showUploadBtn: false,
                    timer: 0,
                    showMore: false,
                    navIndex: 0
                },
                filters: {
                    dateFormate: function(time){
                        return utils.tsToDateFormat(time, 'yyyy-MM-dd hh:mm');
                    },
                    timeFormate: function(diffTime){
                        var closeTimeStr = '';
                        var day = Math.floor(diffTime / 3600 / 24);
                        var hour = Math.floor(diffTime / 3600 % 24);
                        var min = Math.floor(diffTime / 60 % 60);
                        var sec = Math.floor(diffTime % 60);
                    
                        if(diffTime >= 3600*24){
                            closeTimeStr = `${day}天${hour}小时${min}分${sec}秒`;
                        }else if(diffTime >= 3600){
                            closeTimeStr = `${hour}小时${min}分${sec}秒`;
                        }else if(diffTime >= 60){
                            closeTimeStr = `${min}分${sec}秒`;
                        }else if(diffTime > 0){
                            closeTimeStr = `${sec}秒`;
                        }else{
                            closeTimeStr = `已终止`;
                        }

                        return closeTimeStr;
                    },
                },
                created: function(){
                    this.id = api.pageParam.data.id;
                    this.referer = api.pageParam.data.referer;
                },
                methods:{
                    goTaskDetail: function(){
                        if(this.info.ispublish == 1){
                            if(this.referer == 'publishDetail'){
                                api.closeWin();
                            }else{
                                $.openUrl('common/commonTitle','task/sendDetail',{title:'派单详情',taskId: this.info.task_info.task_id});
                            }
                        }else{
                            $.openUrl('common/commonTitle','task/detail',{title:'任务详情',taskId: this.info.task_info.task_id});
                        }
                    },
                    getMediaUrl: function(url){
						var exc = url.substr(url.lastIndexOf('.')+1).toLocaleLowerCase();
						if(['jpg','jpeg','gif','png','webp'].indexOf(exc) != -1){
							return url;
						}
						return '../../../image/task/video.png';
					},
                    renderStatusUI: function(status){
                        var report = this.info.ispublish.toString();
                        var gray = 'rgb(160, 162, 160)';
                        var red = 'rgb(245, 13, 13)';
                        var green = '#49B447';
                        var blue = 'rgb(6, 78, 241)';
                        var yellow = 'rgb(245, 120, 13)';
                        var statusInfo = {
                            '0': {text: '待审核', color: gray},
                            '1': {text: report == 1 ? '胜诉' : '败诉', color: report == 1 ? green: red},
                            '2': {text: report == 1 ? '败诉' : '胜诉', color: report == 1 ? red : green},
                            '3': {text: '待复审', color: yellow},
                            '4': {text: '待复审', color: yellow},
                            '5': {text: '待复审', color: yellow},
                            '6': {text: '判平', color: blue},
                            '7': {text: '判平', color: blue},
                        };
                        return statusInfo[status];
                    },
                    getDetail: function(){
                        var _this = this;
                        $.ajax({
                            url: '/task/arbitration/my_info/detail?id='+this.id,
                            method: 'get',
                            success: function(res){
                                _this.info = res.data;
                                _this.steps = res.data.task_info.custom_steps;
                                _this.calcDifftime();
                                _this.countDown();
                                _this.renderLast();
                            },
                        });
                    },
                    renderLast: function(){
                        var ispublish = parseInt(this.info.ispublish);
                        var status = this.info.arbitration_info.status.toString();
                        var gray = 'rgb(160, 162, 160)';
                        var red = 'rgb(245, 13, 13)';
                        var green = '#49B447';
                        var blue = 'rgb(6, 78, 241)';

                        var color = gray;
                        var content = '';
                        switch (status){
                            case '1':
                                content = ispublish ? '我方胜诉' : '我方败诉';
                                color = ispublish ? green : red;
                                break;
                            case '2':
                                content = ispublish ? '我方败诉' : '我方胜诉';
                                color = ispublish ? red : green;
                                break;
                            case '6':
                                content = '双方判平';
                                color = blue;
                                break;
                            case '7':
                                content = '双方判平';
                                color = blue;
                                break;
                        }
                        if(content == ''){
                            this.lastLog = null;
                        }else{
                            this.lastLog = {
                                color: color,
                                text: content
                            };
                        }
                    },
                    showCountdown: function(item){
                        var $footer = document.querySelector('#footer');
                        if(!item.accept_close_time && !item.publish_close_time){
                            return false;
                        }
                        if([3,4,5].indexOf(this.info.arbitration_info.status) == -1){
                            return false;
                        }
                        this.containerPadding = ($footer ? $footer.offsetHeight : 0)  + 'px';
                        this.renderUploadBtn();
                        return true;
                    },
                    calcDifftime: function(){
                        var logs = this.info.log;
                        var lastCountdownLog = null;
                        if(logs.length == 0){
                            this.acceptDiffTime = 0;
                            this.publishDiffTime = 0;
                            return false;
                        }
                        for(var i=0; i<logs.length; i++){
                            if(logs[i].is_close == 1){
                                if(logs[i].accept_close_time > 0 || logs[i].publish_close_time > 0){
                                    lastCountdownLog = logs[i];
                                    this.logId = lastCountdownLog.id;
                                    break;
                                }
                            }
                        }
                        if(lastCountdownLog == null){
                            this.acceptDiffTime = 0;
                            this.publishDiffTime = 0;
                            return false;
                        }
                        this.acceptDiffTime = Math.floor(((lastCountdownLog.time_created + lastCountdownLog.accept_close_time) * 1000 - Date.now()) / 1000);
                        this.publishDiffTime = Math.floor(((lastCountdownLog.time_created + lastCountdownLog.publish_close_time) * 1000 - Date.now()) / 1000);
                    },
                    countDown: function(){
                        var _this = this;
                        this.publishDiffTime -= 1;
                        this.acceptDiffTime -= 1;
                        this.timer = setTimeout(function(){
                            if(_this.publishDiffTime <= 0){
                                _this.publishDiffTime = 0;
                            }
                            if(_this.acceptDiffTime <= 0){
                                _this.acceptDiffTime = 0;
                            }
                            _this.renderUploadBtn();

                            if(_this.publishDiffTime == 0 && _this.acceptDiffTime == 0){
                                _this.timer = clearTimeout(_this.timer);
                                return false;
                            }else{
                                _this.countDown();
                            }

                        }, 1000);
                    },
                    renderUploadBtn: function(){
                        var _this = this;
                        var ispublish = this.info.ispublish;
                        var status = this.info.arbitration_info.status;
                        if([3,4,5].indexOf(status-0) === -1){
                            _this.showUploadBtn = false;
                            return false;
                        }
                        if(ispublish){
                            // 派单人
                            if(status == 3 || status == 5){
                                _this.showUploadBtn = _this.publishDiffTime < 1 ? false : true;
                            }
                        }else{
                            // 接单人
                            if(status == 4 || status == 5){
                                _this.showUploadBtn = _this.acceptDiffTime < 1 ? false : true;
                            }
                        }
                    },
                    viewMedia: function(url){
                        this.viewPicture(url);
                        // var exc = url.substr(url.lastIndexOf('.')+1).toLocaleLowerCase();
                        // if(['jpg','jpeg','png','gif','webp'].indexOf(exc) >= 0){
                        //     this.viewPicture(url);
                        // }else{
                        //     this.viewVideo(url);
                        // }
                    },
                    viewPicture: function(img){
                        photoBrowser.open({
                            images: [img],
                            bgColor: '#000',
                            zoomEnabled: true,
                        }, function(ret, err) {
                            if(ret.eventType == 'click'){
                                photoBrowser.close();
                            }
                        });
                    },
                    viewVideo: function(video){
                        // 转码问题，暂时不做。
                    },
                    copyOperableVal: function(val){
                        clipBoard.set({
                            value: val
                        }, function(ret, err) {
                            if (ret) {
                                $.toast('复制成功');
                            } else {
                                $.toast('复制失败');
                            }
                        });
                    },
                },
                mounted(){
                    this.getDetail();
                    $.initJs(this);
                }
            });

            
            api.addEventListener({name: 'updateArbitrationDetail'}, function(ret, err){
                app.timer = clearTimeout(app.timer);
                app.getDetail();
            });
			
			$.pullDown({
			    success:function(){
			        app.getDetail();
			    }
			});

        }
    </script>
</body>
</html>
